<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    title="查看图片"
    width="936"
    :before-close="handleClose"
    :z-index="2000"
  >
    <div
      style="
        padding: 16px 16px 16px 19px;
        border: 1px solid #e4e7ed;
        margin-top: -1px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        display: flex;
        align-items: center;
        flex-flow: wrap;
      "
    >
      <div class="mr-1 mb-1" v-for="(item, index) in image_list" :key="index">
        <VImage
          :src="item.url"
          :width="128"
          :height="128"
          :previewlist="photoSort(item, image_list)"
        >
        </VImage>

        <div class="overflow-line1" style="width: 128px">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      "
    >
      <el-button type="" @click="dialogVisible = false"> 关闭 </el-button>
    </div>
  </el-dialog>
</template>

<script setup name="checkRoutineImage">
import { ref } from "vue";
import VImage from "@/components/Image/index.vue";
import { photoSort } from "@/utils/index";

const dialogVisible = ref(false);
const image_list = ref([]);
const load = ref(false);
const open = async (list) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  image_list.value = list;
  dialogVisible.value = true;
};

const handleClose = (done) => {
  done();
};

defineExpose({ open });
</script>
<style lang="scss" scoped></style>
